<template>
  <van-swipe @change="onChange" :show-indicators="false" :autoplay="5000">
    <van-swipe-item v-for="item in bannerList" :key="item.book_id">
      <div class="banner-box">
        <div
          class="banner-bg"
          :style="'background-image:url(' + item.image + ')'"
        ></div>
        <div class="banner-wrap"></div>
        <div class="book-box" @click="handleToDetail(item.book_id)">
          <div class="book-detail">
            <div class="book-info">
              <div class="book-name">{{ item.name }}</div>
              <div class="book-writer">{{ item.writer }}著</div>
              <div class="book-new van-ellipsis">
                {{ item.new_chapter }}
              </div>
            </div>
            <van-image :src="item.image" class="book-img" radius="6">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
          <div class="book-bottom">
            <div class="book-other">
              <span class="book-over">{{ item.is_over }}</span>
              <span class="book-line"></span>
              <span class="book-type">{{ item.type }}</span>
            </div>
            <span class="book-index">{{ current + 1 }}/{{ bannerList.length }}</span>
          </div>
        </div>
      </div>
    </van-swipe-item>
  </van-swipe>
</template>
<script lang="ts" setup>
import { defineProps, PropType, ref } from 'vue'
import { useRouter } from 'vue-router'
import { BookItem } from '@/common/types/index'

const props = defineProps({
  bannerList: {
    type: Array as PropType<BookItem[]>,
    default: () => {
      return []
    }
  }
})

const current = ref(0)

const onChange = (val: number) => {
  current.value = val
}

const router = useRouter()

const handleToDetail = (book_id: number) => {
  router.push({
    name: 'Detail',
    params: {
      book_id
    }
  })
}
</script>
<style lang="scss" scoped>
.banner-box {
  position: relative;
  margin: 12px;
  border-radius: 8px;
  box-shadow: 0px 0px 12px 0px rgba(6, 27, 65, 0.16);
  overflow: hidden;

  .banner-bg {
    height: 140px;
    background-repeat: no-repeat;
    background-size: calc(100vw - 24px) 140px;
    filter: blur(10px);
    border-radius: 8px;
    opacity: 0.85;
  }
  .banner-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: #00266b;
    opacity: 0.3;
    border-radius: 8px;
  }
  .book-box {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    opacity: 0.85;
    border-radius: 8px;

    .book-detail {
      position: relative;
      padding: 16px 0px 10px 0px;
      margin: 0 15px 0 15px;
      border-bottom: 1px rgba(255, 255, 255, 0.25) solid;

      .book-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 76px;
        padding-right: 68px;

        .book-name {
          font-size: 18px;
          line-height: 18px;
          font-weight: 800;
          color: rgba(255, 255, 255, 0.85);
          margin-top: 2px;
        }
        .book-writer {
          font-size: 12px;
          line-height: 12px;
          font-weight: bold;
          color: rgba(255, 255, 255, 0.851);
          margin-top: 9px;
          margin-left: 2px;
        }
        .book-new {
          width: 100%;
          text-align: left;
          font-size: 14px;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.65);
          line-height: 16px;
          margin-top: 16px;
          margin-left: 2px;
        }
      }
      .book-img {
        position: absolute;
        top: 16px;
        right: 0;
        width: 58px;
        height: 76px;
      }
    }
    .book-bottom {
      display: flex;
      padding: 8px 18px 0px 15px;
      align-items: center;
      justify-content: space-between;

      .book-other {
        display: flex;
        align-items: center;

        .book-over {
          font-size: 12px;
          line-height: 12px;
          font-weight: bold;
          color: rgba(255, 255, 255, 0.65);
        }
        .book-line {
          float: left;
          width: 2px;
          height: 12px;
          background: rgba(255, 255, 255, 0.65);
          border-radius: 1px;
          margin: 0 16px;
        }
        .book-type {
          font-size: 12px;
          line-height: 12px;
          font-weight: bold;
          color: rgba(255, 255, 255, 0.65);
        }
      }
      .book-index {
        font-size: 12px;
        font-family: 'Alibaba PuHuiTi';
        font-weight: bold;
        color: rgba(255, 255, 255, 0.65);
      }
    }
  }
}
</style>
